<div class="input-box">
    <input type="file" name="myPhoto" (change)="choseImage($event)" />
</div>
<div class="img-box">
    <img *ngIf="!imageData" class="image" src="assets/image-thin.svg" alt="" srcset="">
    <ng-container *ngIf="imageData">
        <div>
            <img [src]="imageData" image />
        </div>
        <div>
            <h1> >>> </h1>
        </div>
        <div>
            <canvas #myCanvas result></canvas>
        </div>
    </ng-container>
</div>
<div class="setting-box">
    <div class="switch-box">
        <div class="label">切换大小端</div>
        <nz-switch [(ngModel)]="options.endian" (ngModelChange)="convert($event)"></nz-switch>
    </div>
    <div class="switch-box">
        <div class="label">颜色反转</div>
        <nz-switch [(ngModel)]="options.invert" (ngModelChange)="convert($event)"></nz-switch>
    </div>
    <div class="switch-box">
        <div class="label">使能抖动</div>
        <nz-switch [(ngModel)]="options.dither" (ngModelChange)="convert($event)"></nz-switch>
    </div>
    <div class="slider-box" *ngIf="!options.dither">
        <div class="label">取色阀值</div>
        <nz-slider [(ngModel)]="options.threshold" [nzMax]="255" (ngModelChange)="convert($event)"></nz-slider>
    </div>
</div>

<div class="code-box" *ngIf="result">
    <ngx-codemirror [ngModel]="result" [options]="codemirrorOptions"></ngx-codemirror>
</div>